{% extends 'public/layout.html' %}
{% load group_tag %}

{% block load_css %}
    <link href="/static/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="/static/css/plugins/ladda/ladda-themeless.min.css" rel="stylesheet">
    <style>
    .float-e-margins .btn {
        margin-bottom: 0px;
    }
    </style>
{% endblock %}

<link href="/static/css/bootstrap.css" rel="stylesheet">
<script src="/static/js/jquery-2.1.1.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
{% block mbx %}
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-sm-10">
            <h2></h2>
            <ol class="breadcrumb">
                <li>
                    <a href="{% url 'index' %}">仪表盘</a>
                </li>

                <li>
                    <a>监控中心</a>
                </li>


                <li class="active">
                    <strong>监控配置</strong>
                </li>

            </ol>
        </div>
        <div class="col-sm-2">
        </div>
    </div>
{% endblock %}

{% block body %}
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>监控配置列表</h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" style="overflow:scroll;white-space : nowrap">
                        <div class="form-group">
                                {% if request.user.is_superuser %}
                                <button type="button" class="btn btn-sm btn-primary" data-toggle="modal"
                                        data-target="#myModal">
                                    添加监控项
                                </button>
                                {% endif %}

                        </div>
                        <table class="table table-striped table-bordered table-hover  dataTable no-footer">
                            <thead>
                            <tr>
                                <th class="text-center">#</th>
                                <th class="text-center">任务名称</th>
                                <th class="text-center">类型</th>
                                <th class="text-center">URL地址</th>
                                <th class="text-center">IP(域名)</th>
                                <th class="text-center">端口</th>
                                <th class="text-center">进程名称</th>
                                <th class="text-center">频率</th>
                                <th class="text-center">自愈项</th>
                                <th class="text-center">告警组</th>
                                <th class="text-center">告警方式</th>
                                <th class="text-center">启用状态</th>
                                <th class="text-center">自愈状态</th>
                                <th class="text-center">更新时间</th>
                                <th class="text-center">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for monitor_obj in object_list %}
                                <tr>
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td class="text-center">{{ monitor_obj.name }}</td>

                                     {% for type_tuple in type_list %}
                                        {% if monitor_obj.type == type_tuple.0  %}
                                            <td class="text-center">{{ type_tuple.1 }}</td>
                                        {% endif %}
                                    {% endfor %}

                                    <td class="text-center">{{ monitor_obj.url|default_if_none:"" }}</td>
                                    <td class="text-center">{{ monitor_obj.address|default_if_none:"" }}</td>
                                    <td class="text-center">{{ monitor_obj.port|default_if_none:"" }}</td>
                                    <td class="text-center">{{ monitor_obj.process_name|default_if_none:"" }}</td>

                                    {% for frequency_tuple in frequency_list %}
                                        {% if monitor_obj.frequency == frequency_tuple.0  %}
                                            <td class="text-center">{{ frequency_tuple.1 }}</td>
                                        {% endif %}
                                    {% endfor %}

                                    <td class="text-center">
                                        {% for m in  monitor_obj.mc.all %}
                                            {{m.item}}
                                        {% endfor%}
                                    </td>

                                    <td class="text-center">
                                        {% for m in  monitor_obj.ml.all %}
                                            {{m.name}}
                                        {% endfor%}
                                    </td>

                                    {% for alert_type_tuple in alert_type_list %}
                                        {% if monitor_obj.alert_type == alert_type_tuple.0  %}
                                            <td class="text-center">{{ alert_type_tuple.1|default_if_none:"" }}</td>
                                        {% endif %}
                                    {% endfor %}

                                    <td class="text-center">{% if monitor_obj.status %}
                                        <dd><span class="label label-primary">启用</span></dd>
                                    {% else %}
                                        <dd><span class="label label-danger">禁用</span></dd>
                                    {% endif %}</td>

                                    <td class="text-center">{% if monitor_obj.auto_status %}
                                        <dd><span class="label label-primary">正常</span></dd>
                                    {% else %}
                                        <dd><span class="label label-danger">关闭</span></dd>
                                    {% endif %}</td>

                                    <td class="text-center">{{ monitor_obj.utime|date:"Y-m-d H:i:s" }}</td>
                                    <td class="text-center">
                                        {% if monitor_obj.status %}
                                            <a class="btn btn-xs btn-warning" onclick="monitorconfig_stop({{ monitor_obj.id }})">禁用</a>
                                        {% else %}
                                            <a class="btn btn-xs btn-primary" onclick="monitorconfig_start({{ monitor_obj.id }})">启用</a>
                                        {% endif %}
                                        <a class="btn btn-xs btn-primary" href="{% url 'monitorconfig_edit' %}?id={{monitor_obj.id}}">编辑</a>
                                        {% if request.user.is_superuser %}
                                            <a class="btn btn-xs btn-danger" onclick="monitorconfig_delete({{ monitor_obj.id }})">删除</a>
                                        {%endif%}
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>


                        <div class="modal inmodal fade" id="myModal" tabindex="-1"
                             role="dialog"
                             aria-hidden="true">
                            <div class="modal-dialog modal-sm">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"><span
                                                aria-hidden="true">&times;</span><span
                                                class="sr-only">Close</span>
                                        </button>
                                        <h4 class="modal-title">添加监控项</h4>
                                    </div>
                                    <div class="modal-body">
                                        <form id="create_host_form">
                                            {% csrf_token %}

                                            <div class="form-group">
                                                <label class="col-md-12 control-label">监控类型</label>
                                                <select class="select2_demo_1 form-control" name="type" id="mtp" onclick="showfunc(this)">
                                                    {% for type_tuple in type_list %}
                                                        <option value="{{ type_tuple.0 }}">{{ type_tuple.1 }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>


                                            <div class="form-group">
                                                <label class="col-md-12 control-label">任务名称</label>
                                                <input type="text" class="form-control" placeholder="任务名称"
                                                       name="name">
                                            </div>

                                            <div id="monitor_content">
                                                <div class="form-group">
                                                    <label class="col-md-12 control-label">监控地址</label>
                                                    <input type="text" class="form-control" placeholder="监控地址"
                                                           name="url">
                                                </div>

                                            </div>

                                            <div class="form-group">
                                                <label class="col-md-12 control-label">监控频率</label>
                                                <select class="select2_demo_1 form-control" name="frequency">
                                                    {% for frequency_tuple in frequency_list %}
                                                        <option value="{{ frequency_tuple.0 }}">{{ frequency_tuple.1 }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>

                                  
                                            <div class="form-group">
                                                <label class="col-md-12 control-label">告警组</label>
                                                <select class="select2_demo_1 form-control" name="linkgroup_id">
                                                    {% for ac_object in alert_list %}
                                                        <option value="{{ ac_object.id }}">{{ ac_object.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-md-12 control-label">告警方式</label>
                                                <select class="select2_demo_1 form-control" name="alert_type">
                                                    {% for ac_object in alert_type_list %}
                                                        <option value="{{ ac_object.0 }}">{{ ac_object.1 }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>

                                            <div class="form-group">
                                                <label class="col-md-12 control-label">备注信息</label>
                                                <input type="text" class="form-control" placeholder="备注信息"
                                                       name="remarks">
                                            </div>

                                            <div id="devops">

                                                <div class="form-group" id="details">
                                                    <label class="col-md-12 control-label">执行动作主机</label>
                                                    <select class="select2_demo_1 form-control" name="sv_ip">
                                                        <option value="0"></option>
                                                        {% for server in servers %}
                                                            <option value="{{ server.ip_inner }}">{{ server.hostname }}</option>
                                                        {% endfor %}
                                                    </select>
                                                    <label class="col-md-12 control-label">执行自愈项</label>
                                                    <select class="select2_demo_1 form-control" name="ac_id">
                                                        {% for ac_object in ac_objects %}
                                                            <option value="{{ ac_object.id }}">{{ ac_object.item }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>


                                            <div id="box"></div>
                                            <input type="button" value="添加动作组" id="btm" class="btn btn-primary" style="float:left" onclick="add_div()">
                                            <input type="button" value="删除动作组" id="btm" class="btn btn-danger" style="float:right" onclick="del_div()">
                                            </br>



                                        </form>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
                                        <button type="button" class="btn btn-primary" data-style="expand-right"
                                                id="submit_host">测试并提交
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <center>
                                <div class="btn-group">
                                    <a class="btn btn-white" href="{% url 'auto_recovery' %}?page=1">首页</a>
                                    {% if page_obj.has_previous %}
                                        <a class="btn btn-white" type="button"
                                           href="?page={{ page_obj.previous_page_number }}">
                                            上一页
                                        </a>
                                    {% else %}
                                        <a class="btn btn-white" type="button" disabled="disabled">上一页</a>
                                    {% endif %}

                                    {% for page in page_range %}
                                        {% ifequal page page_obj.number %}
                                            <a class="btn btn-white active">{{ page }}</a>
                                        {% else %}
                                            <a href="?page={{ page }}" class="btn btn-white">{{ page }}</a>
                                        {% endifequal %}
                                    {% endfor %}

                                    {% if page_obj.has_next %}
                                        <a class="btn btn-white" type="button"
                                           href="?page={{ page_obj.next_page_number }}">
                                            下一页
                                        </a>
                                    {% else %}
                                        <a class="btn btn-white" type="button" disabled>下一页</a>
                                    {% endif %}
                                    <a class="btn btn-white"
                                       href="{% url 'auto_recovery' %}?page={{ paginator.num_pages }}">末页</a>
                                </div>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block load_js %}
    <script src="/static/js/plugins/sweetalert/sweetalert.min.js"></script>
    <script src="/static/js/plugins/ladda/spin.min.js"></script>
    <script src="/static/js/plugins/ladda/ladda.min.js"></script>
    <script src="/static/js/plugins/ladda/ladda.jquery.min.js"></script>

    <!-- Toastr script -->
    <script src="/static/js/plugins/toastr/toastr.min.js"></script>
    <script>
        $('#submit_host').click(function () {
            var btn = $(this).ladda();
            btn.ladda('start');
            var data = $('#create_host_form').serialize();
            $.ajax({
                url: '{% url 'monitor_config' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    setTimeout(function () {
                        btn.ladda('stop');
                    }, 200);
                    if (res.status == 0) {
                        swal({
                            title: res.msg,
                            type: 'success',
                            confirmButtonText: "OK"
                        }, function () {
                            window.location.href = '{% url 'monitor_config' %}';
                        });
                    } else {
                        swal({
                            title: res.msg,
                            type: 'error',
                            confirmButtonText: "知道了"
                        });
                    }
                }
            })

        })

        function monitorconfig_stop(monitorconfig_id) {
            var data = {};
            data['monitorconfig_id'] = monitorconfig_id;
            data['csrfmiddlewaretoken'] = "{{ csrf_token }}";
            $.ajax({
                url: '{% url 'monitor_config_stop' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        swal({
                            title: res.msg,
                            type: 'success',
                            confirmButtonText: "OK"
                        }, function () {
                            window.location.reload()
                        });
                    } else {
                        swal({
                            title: res.msg,
                            type: 'error',
                            confirmButtonText: "知道了"
                        });
                    }
                }
            })
        };

        function monitorconfig_start(monitorconfig_id) {
            var data = {};
            data['monitorconfig_id'] = monitorconfig_id;
            data['csrfmiddlewaretoken'] = "{{ csrf_token }}";
            $.ajax({
                url: '{% url 'monitor_config_start' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        swal({
                            title: res.msg,
                            type: 'success',
                            confirmButtonText: "OK"
                        }, function () {
                            window.location.reload()
                        });
                    } else {
                        swal({
                            title: res.msg,
                            type: 'error',
                            confirmButtonText: "知道了"
                        });
                    }
                }
            })
        };


        function monitorconfig_delete(monitorconfig_id) {
            var data = {};
            data['monitorconfig_id'] = monitorconfig_id;
            data['csrfmiddlewaretoken'] = "{{ csrf_token }}";
            $.ajax({
                url: '{% url 'monitor_config_delete' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        swal({
                            title: res.msg,
                            type: 'success',
                            confirmButtonText: "OK"
                        }, function () {
                            window.location.reload()
                        });
                    } else {
                        swal({
                            title: res.msg,
                            type: 'error',
                            confirmButtonText: "知道了"
                        });
                    }
                }
            })
        };

        function server_flush(server_id) {
            var data = {};
            data['server_id'] = server_id;
            data['csrfmiddlewaretoken'] = "{{ csrf_token }}";
            toastr.options = {
                "closeButton": true,
                "debug": false,
                "progressBar": true,
                "preventDuplicates": false,
                "positionClass": "toast-top-right",
                "onclick": null,
                "showDuration": "400",
                "hideDuration": "1000",
                "timeOut": "1000",
                "extendedTimeOut": "1000",
                "showEasing": "swing",
                "hideEasing": "linear",
                "showMethod": "fadeIn",
                "hideMethod": "fadeOut",
                "onHidden": function () {
                    window.location.reload();
                }
            };
            $.ajax({
                url: '{% url 'server_flush' %}',
                type: 'post',
                data: data,
                success: function (res) {
                    if (res.status == 0) {
                        toastr.success('刷新探测', res.msg);
                    } else {
                        toastr.error('刷新探测', res.msg);
                    }
                }
            })
        }

        function showfunc(value) {
            var selectedOption=value.options[value.selectedIndex];
                //alert(selectedOption);

                if(selectedOption.value=="0"){
                    var sHtml = '';
                    sHtml += '<div class="form-group"> \
                                <label class="col-md-12 control-label">监控地址url</label> \
                                <input type="text" class="form-control" placeholder="监控地址url" \
                                       name="url"> \
                            </div>';
                    document.getElementById("monitor_content").innerHTML = sHtml;
                }

                if (selectedOption.value=="1"){
                    var sHtml = '';
                    sHtml += '<div class="form-group"> \
                                <label class="col-md-12 control-label">监控地址</label> \
                                <input type="text" class="form-control" placeholder="请输入监控地址（IP或者域名)" \
                                       name="address"> \
                            </div> \
                            <div class="form-group"> \
                                <label class="col-md-12 control-label">监控端口</label> \
                                <input type="text" class="form-control" placeholder="监控端口" \
                                       name="port"> \
                            </div>';

                    document.getElementById("monitor_content").innerHTML = sHtml;
                }


                if (selectedOption.value=="2"){
                    var sHtml = '';
                    sHtml += '<div class="form-group"> \
                                <label class="col-md-12 control-label">进程所在主机</label>\
                                                    <select class="select2_demo_1 form-control" name="process_ip">\
                                                        <option value="0"></option>\
                                                        {% for server in servers %}\
                                                            <option value="{{ server.ip_inner }}">{{ server.hostname }}</option>\
                                                        {% endfor %}\
                                                    </select>\
                            </div>\
                            <div class="form-group"> \
                                <label class="col-md-12 control-label">进程关键字</label> \
                                <input type="text" class="form-control" placeholder="可以确保进程唯一的名称" \
                                       name="process"> \
                            </div>';

                    document.getElementById("monitor_content").innerHTML = sHtml;
                }


        }
    </script>


    <script>
        var detail_div = 1;
        function add_div() {
          var e = document.getElementById("details");
            var div = document.createElement("div");
            div.className = "form-group";
            div.id = "details" + detail_div;
            div.innerHTML = e.innerHTML;
            document.getElementById("devops").appendChild(div);
            detail_div++;
        }

        function del_div(){
            var id = "details" + (detail_div - 1).toString();
            console.log(id);
            var e = document.getElementById(id);
            if (e != null)
                document.getElementById("devops").removeChild(e);
            detail_div--;

        }

    </script>


{% endblock %}